<!--
  * 年度预算审核
-->
<template>
  <div v-if="isShow == 0">
    <!---------- 查询表单form begin ----------->
    <a-form class="smart-query-form">
      <a-row class="smart-query-form-row">
        <a-form-item label="关键字查询" class="smart-query-form-item">
          <a-input style="width: 200px" v-model:value="queryForm.key" placeholder="关键字查询" />
        </a-form-item>
        <a-form-item class="smart-query-form-item">
          <a-button type="primary" @click="queryData('1')">
            <template #icon>
              <SearchOutlined />
            </template>
            查询
          </a-button>
          <a-button @click="resetQuery" class="smart-margin-left10">
            <template #icon>
              <ReloadOutlined />
            </template>
            重置
          </a-button>
        </a-form-item>
      </a-row>
    </a-form>
    <!---------- 查询表单form end ----------->
    <a-card size="small" :bordered="false" :hoverable="true">
      <!---------- 表格操作行 begin ----------->
      <a-row class="smart-table-btn-block">
        <div class="smart-table-operate-block">
          <!-- <a-button @click="addHandle" type="primary">
                        <template #icon>
                            <PlusOutlined />
                        </template>
                        新建
                    </a-button> -->
          <!-- <a-button @click="confirmBatchDelete" type="primary" danger
                        :disabled="selectedRowKeyList.length === 0">
                        <template #icon>
                            <DeleteOutlined />
                        </template>
                        批量删除
                    </a-button> -->
        </div>
        <span class="smart-table-column-operate">
          <TableOperator v-model="columns" :tableId="TABLE_ID_CONST.SYSTEM.EMPLOYEE" :refresh="queryData" />
        </span>
      </a-row>
      <!---------- 表格操作行 end ----------->

      <!---------- 表格 begin ----------->
      <a-table size="small" :dataSource="tableData" :columns="columns" rowKey="blfunduseid" bordered
        :loading="tableLoading" :pagination="false" :scroll="{ x: 1500 }">
        <template #bodyCell="{ text, record, column }">
          <template v-if="column.dataIndex === 'blapplyprojectname'">
            <a-button type="link" @click="budgetDetail(record)">{{ record.blapplyprojectname }}</a-button>
          </template>
          <template v-if="column.dataIndex === 'approvalOpinion'">
            <span :style="record.blaudit == 10 ? 'color:red' : 'color:#37b411'">{{ record.fromTo }}</span>
          </template>
          <template v-if="column.dataIndex === 'process'">
            <div class="smart-table-operate">
              <a-button type="link" @click="process(record)">点击查看申报流程</a-button>
              <a v-if="record.blaudit == 10" type="link" @click="upload(record)">点击上传扫描件</a>
              <span v-else-if="record.blaudit == 7" type="link">扫描件已上传</span>
            </div>
          </template>
          <template v-if="column.dataIndex === 'appRecord'">
            <div class="smart-table-operate">
              <a-button type="link" @click="appRecord(record)">点击查看申报记录</a-button>
            </div>
          </template>
        </template>
      </a-table>
      <!---------- 表格 end ----------->
      <!-- 分页-->
      <div class="smart-query-table-page">
        <a-pagination showSizeChanger showQuickJumper show-less-items :pageSizeOptions="PAGE_SIZE_OPTIONS"
          :defaultPageSize="queryForm.limit" v-model:current="queryForm.page" v-model:pageSize="queryForm.limit"
          :total="total" @change="queryData" @showSizeChange="queryData" :show-total="(total) => `共${total}条`" />
      </div>
    </a-card>
    <BudgeUpload ref="formRef" @refresh="queryData"></BudgeUpload>
  </div>
  <!-- 年度预算详情 -->
  <ApprovalDetail v-else-if="isShow == 2" @emitPass="changeShow" :passData="passData" />
  <!-- 流程 -->
  <ApprovalProcess v-else-if="isShow == 3" @emitPass="changeShow" :passData="passData" />
  <!-- 记录 -->
  <AppRecord v-else-if="isShow == 4" @emitPass="changeShow" :passData="passData" />
</template>
<script setup>
  import { reactive, ref, onMounted } from 'vue';
  import { message, Modal } from 'ant-design-vue';
  import { SmartLoading } from '/@/components/framework/smart-loading';
  import { ProManageApi } from '/@/api/ProManage/ProManage-api';
  import { PAGE_SIZE, PAGE_SIZE_OPTIONS } from '/@/constants/common-const';
  import { smartSentry } from '/@/lib/smart-sentry';
  import ApprovalUpdate from './modules/ApprovalUpdate.vue';
  import ApprovalDetail from '../ProManage/modules/BudgetDetail.vue';
  import ApprovalProcess from '../ProManage/modules/BudgetProcess.vue';
  import AppRecord from '../ProManage/modules/BudgetRecord.vue';
  import ApprovalModal from './modules/Approval-modal.vue';
  import BudgeUpload from './modules/BudgeUpload.vue';
  import _ from 'lodash';
  import { TABLE_ID_CONST } from '/@/constants/support/table-id-const';
  import TableOperator from '/@/components/support/table-operator/index.vue';
  // ---------------------------- 表格列 ----------------------------

  const columns = ref([
    {
      title: '项目名称',
      dataIndex: 'blapplyprojectname',
      align: 'center',
      fixed: 'left',
    },
    {
      title: '申请时间',
      dataIndex: 'bldate',
      align: 'center',
      sorter: {
        compare: (a, b) => new Date(a.bldate) - new Date(b.bldate),
      },
    },
    {
      title: '申报状态',
      dataIndex: 'approvalOpinion',
      align: 'center',
    },
    {
      title: '审核流程',
      dataIndex: 'process',
      align: 'center',
    },
    {
      title: '申报记录',
      dataIndex: 'appRecord',
      align: 'center',
    },
    {
      title: '申请年份',
      dataIndex: 'blyear',
      align: 'center',
    },
  ]);

  // ---------------------------- 查询数据表单和方法 ----------------------------

  const queryFormState = {
    key: undefined,
    page: 1,
    limit: PAGE_SIZE,
  };
  // 查询表单form
  const queryForm = reactive({ ...queryFormState });
  // 表格加载loading
  const tableLoading = ref(false);
  // 表格数据
  const tableData = ref([]);
  // 总数
  const total = ref(0);

  // 控制父组件是否展示
  // 0原表格 1新增 2详情 3流程 4记录 5 进入审批
  const isShow = ref(0);
  // 改变父组件展示状态
  function changeShow(value) {
    isShow.value = value.type;
    queryData();
  }
  // 新建
  function addHandle(data) {
    isShow.value = 1;
  }
  // 查看项目详情
  const passData = ref();
  function budgetDetail(data) {
    isShow.value = 2;
    passData.value = data;
  }
  // 项目流程
  function process(data) {
    isShow.value = 3;
    passData.value = data;
  }
  // 申报记录
  function appRecord(data) {
    isShow.value = 4;
    passData.value = data;
  }
  // 重置查询条件
  function resetQuery() {
    let pageSize = queryForm.limit;
    Object.assign(queryForm, queryFormState);
    queryForm.limit = pageSize;
    queryData();
    searchPage.value = false
  }
  const searchPage = ref(false)//检索的翻页
  // 查询数据
  async function queryData(a) {
    tableLoading.value = true;
    try {
      if (a === '1') {
        queryForm.page = 1;
        searchPage.value = true
      }
      if (!searchPage.value) {
        queryForm.key = undefined;
      }
      let queryResult = await ProManageApi.getListCheck(queryForm);
      tableData.value = queryResult.page.list;
      total.value = queryResult.page.totalCount;
    } catch (e) {
      smartSentry.captureError(e);
    } finally {
      tableLoading.value = false;
    }
  }
  onMounted(queryData);

  // ---------------------------- 添加/修改 ----------------------------
  const formRef = ref();

  function upload(data) {
    formRef.value.showModal(data);
  }
</script>